import { useMount } from 'ahooks';
import './TaskExecutionRanking.scss'

import { Tabs } from 'antd'
import { useRequest } from 'alova/client';
import { Http } from '../../Utils/Api';
import { useState } from 'react';


const TextList = ({ top, data }) => {
    return (
        <div className='TextList'>
            <div className='TextList__Top'>
                {top.map(({ label, value, flex }, index) =>
                    <div key={index} style={{ flex }}>{label}</div>
                )}
            </div>
            <div className='TextList__Body'>
                {top.map(({ label, value, flex }, index) =>
                    <div key={index} style={{ flex }}>
                        {data.map((item, index) => {
                            if (value === 'index') {
                                return <div key={index}>{index + 1}</div>
                            }
                            return <div key={index}>{item[value]}</div>
                        })}
                    </div>
                )}
            </div>
        </div>
    )
}

const A01Top = [
    { label: '排名', value: 'index', flex: 5 },
    { label: '姓名', value: 'userName', flex: 10 },
    { label: '所属公司', value: 'organizationName', flex: 20 },
    { label: '积分', value: 'taskPointsTablePoints', flex: 10 },
]
const A02Top = [
    { label: '排名', value: 'index', flex: 5 },
    { label: '所属项目', value: 'organizationName', flex: 20 },
    { label: '积分', value: 'taskPointsTablePoints', flex: 10 },
]
const A03Top = [
    { label: '排名', value: 'index', flex: 5 },
    { label: '公司名称', value: 'companyName', flex: 20 },
    { label: '积分', value: 'taskPointsTablePoints', flex: 10 },
]

const TaskExecutionRanking = () => {
    const [A01Data, setA01Data] = useState([])
    const [A02Data, setA02Data] = useState([])
    const [A03Data, setA03Data] = useState([])

    const items = [
        { key: '1', label: '个人排名', children: <TextList top={A01Top} data={A01Data} /> },
        { key: '2', label: '项目排名', children: <TextList top={A02Top} data={A02Data} /> },
        { key: '3', label: '公司排名', children: <TextList top={A03Top} data={A03Data} /> },
    ]

    const { send } = useRequest(data => Http(data), { immediate: false })

    useMount(() => {
        send({ method: 'get', url: 'taskExecution/GetHistoricalPointsUserRank' }).then(res => setA01Data(res.data.list))
        send({ method: 'get', url: 'taskExecution/GetHistoricalPointsProjectRank' }).then(res => setA02Data(res.data.list))
        send({ method: 'get', url: 'taskExecution/GetHistoricalPointsOrganizationRank' }).then(res => setA03Data(res.data.list))
    })

    return (
        <div className='TaskExecutionRanking'>
            <Tabs
                tabPosition='left'
                items={items}
            />
        </div>
    );
};

export default TaskExecutionRanking;